﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../js/html5shiv.min.js"></script>
      <script src="../js/respond.min.js"></script>
    <![endif]-->

    <title>页面标题</title>

    <style type="text/css">
        body {
            font-family: 微软雅黑;
            background-color: rgb(228, 152, 108);
            background-image: url(../images/bg.jpg);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .icon {
            margin-right: 5px;
        }

        .content {
            color: #fff;
            background-color: rgba(0, 0, 0, .3);
        }

            .content .one {
                margin-top: 7px;
            }

        .point {
            display: block;
            height: 7px;
            width: 3px;
            background-image: url(../images/dot.png);
            position: absolute;
            left: -2px;
            top: -7px;
        }

        .content_left {
            text-align: right;
        }

            .content_left .date {
                margin-top: -30px;
            }

            .content_left .day {
                font-size: 18px;
            }

            .content_left .time {
                font-size: 30px;
            }

        .content_right {
            /*background-color: rgba(0, 0, 0, .5);*/
            border-left: 1px solid #fff;
            -ms-word-break: break-all;
            word-break: break-all;

            border-radius: 0px 5px 5px 0px;
        }

            .content_right h1,p {
                padding-right: 6px;
            }

            .content_right h1 {
                font-size: 32px;
                line-height: 28px;
            }

            .content_right p {
                font-size: 18px;
            }

        /* bootstrap plus */
        .navbar {
            -moz-transition: background-color linear .2s, opacity linear .2s;
            -o-transition: background-color linear .2s, opacity linear .2s;
            -webkit-transition: background-color linear .2s, opacity linear .2s;
            transition: background-color linear .2s, opacity linear .2s;
            border: none;
        }

        .navbar-nav {
            font-size: 16px;
        }

        @media (max-width: 768px) {
            .content_left .date {
                margin-top: -16px;
            }

            .content_left .day,.content_left .time {
                display: block;
            }

            .content_left .day {
                font-size: 16px;
            }

            .content_left .time {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 Begin -->
    <nav id="navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- 移动端按钮 Begin -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" style="padding-top: 8px;" href="#">
                    <img alt="Brand" src="../images/logo.png" />
                </a>
                <a id="add_one" class="btn btn-info visible-xs-block" style="margin-top: 8px; margin-right: 8px; height: 34px; float: right;" href="#">
                    <span class="glyphicon glyphicon-pencil icon"></span>
                    <span style="font-size: 16px; line-height: 0px;">写动态</span>
                </a>
            </div>
            <!-- 移动端按钮 End -->

            <!-- 导航主按钮 Begin -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#"><span class="glyphicon glyphicon-star icon"></span><span>动态</span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-heart icon"></span><span>好友关注</span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-home icon"></span><span>我的园地</span></a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-plus icon"></span><span>注册</span></a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-user icon"></span><span>登录</span></a></li>
                </ul>
            </div>
            <!-- 导航主按钮 End -->
        </div>
    </nav>
    <!-- 导航栏 End -->

    <div class="container content">
        <div class="row" style="margin-top: 50px;">
            <div class="col-xs-3"></div>
            <div class="col-xs-9">
                <div style="height: 230px; margin-left: -57px; background-image: url(../images/top_cat.png); background-repeat: no-repeat;"></div>
                <!--<img style="width: 320px; margin-left: -49px;" src="../images/top_cat.png" alt="cat" />-->
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3"></div>
            <div class="col-xs-9 content_right" style="height: 50px;"></div>
        </div>
        <div class="row one">
            <div class="col-xs-3 content_left"><div class="date"><span class="-hidden-xs day">14/7/17&nbsp;</span><span class="time">19:47</span></div></div>
            <div class="col-xs-9 col-lg-8 content_right">
                <i class="point"></i>
                <h1>sdsds</h1>
                <p>sssssssssssssssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-all</p>
            </div>
        </div>
        <div class="row one">
            <div class="col-xs-3 content_left"><div class="date"><span class="-hidden-xs day">14/7/17&nbsp;</span><span class="time">19:47</span></div></div>
            <div class="col-xs-9 col-lg-8 content_right">
                <i class="point"></i>
                <h1>sdsds</h1>
                <p>sssssssssssssssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-all</p>
            </div>
        </div>
        <div class="row one">
            <div class="col-xs-3 content_left"><div class="date"><span class="-hidden-xs day">14/7/17&nbsp;</span><span class="time">19:47</span></div></div>
            <div class="col-xs-9 col-lg-8 content_right">
                <i class="point"></i>
                <h1>sdsds</h1>
                <p>sssssssssssssssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-all</p>
            </div>
        </div>
        <div class="row one">
            <div class="col-xs-3 content_left"><div class="date"><span class="-hidden-xs day">14/7/17&nbsp;</span><span class="time">19:47</span></div></div>
            <div class="col-xs-9 col-lg-8 content_right">
                <i class="point"></i>
                <h1>sdsds</h1>
                <p>sssssssssssssssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-all</p>
            </div>
        </div>
        <div class="row one">
            <div class="col-xs-3 content_left"><div class="date"><span class="-hidden-xs day">14/7/17&nbsp;</span><span class="time">19:47</span></div></div>
            <div class="col-xs-9 col-lg-8 content_right">
                <i class="point"></i>
                <h1>sdsds</h1>
                <p>sssssssssssssssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-all</p>
            </div>
        </div>
        <div class="row one">
            <div class="col-xs-3 content_left"><div class="date"><span class="-hidden-xs day">14/7/17&nbsp;</span><span class="time">19:47</span></div></div>
            <div class="col-xs-9 col-lg-8 content_right">
                <i class="point"></i>
                <h1>sdsds</h1>
                <p>sssssssssssssssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-all</p>
            </div>
        </div>
        <div class="row one">
            <div class="col-xs-3 content_left"><div class="date"><span class="-hidden-xs day">14/7/17&nbsp;</span><span class="time">19:47</span></div></div>
            <div class="col-xs-9 col-lg-8 content_right">
                <i class="point"></i>
                <h1>sdsds</h1>
                <p>sssssssssssssssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-sssssssssssbreak-all</p>
            </div>
        </div>
    </div>

    <!-- End -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../js/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" language="javascript">
        window.onscroll = function () {
            $("#navbar").css("opacity", $(document).scrollTop() > 50 ? ".75" : "1");
        }

        $("#navbar").mouseenter(function () {
            $("#navbar").css("opacity", "1");
        });

        $("#navbar").mouseleave(function () {
            $("#navbar").css("opacity", $(document).scrollTop() > 50 ? ".75" : "1");
        });
    </script>
</body>
</html>
